<template>

  <baidu-map class="bm-view" center="郑州" :scroll-wheel-zoom="true">
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-marker :position="{ lng: 113.666342, lat: 34.753084 }" :dragging="true"
          :icon="{ url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: { width: 300, height: 157 } }"
          @dragend="mapDragend"></bm-marker>
  </baidu-map>

</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { getAddressByPoints } from 'vue-baidu-map-3x';

const mapDragend = (event: any) => {

  console.log(event.point.lat)
  console.log(event.point.lng)

  const config = { location: [event.point.lat, event.point.lng] };
  getAddressByPoints(config, ['FMYihQ2aXcKidOkniSS9hv68QcH7gskK']).then((response: any) => {
      console.log(response.formatted_address)

  });

}


</script>

<style>
.bm-view {
  width: 100%;
  height: 400px;
}
</style>